<template>
  <div class="article">
    <go-back title="严选专栏"></go-back>
    <ul>
      <li v-for="(item,i) in article" :key="i">
        <img :src="item.pic" alt />
        <p class="p1">{{item.title}}</p>
        <p class="p2">{{item.descript}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import goBack from "@/components/goBack/goBack";
import { getWen } from "../../utils/api/home";
export default {
  name: "",
  data() {
    return {
      article: [],
    };
  },
  components: { goBack },
  created() {
    getWen().then((res) => {
      console.log(res);
      this.article = res;
    });
  },
  mounted() {},
  methods: {},
};
</script>

<style lang='scss' scoped>
.article {
  width: 100%;
  overflow: auto;
  height: 100%;
  overflow-x: hidden;
  ul {
    width: 100%;
    li {
      width: 100%;
      height: 4rem;
      font-size: 0.3rem;
      color: #ffffff;
      position: relative;
      margin-bottom: .1rem;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
      .p1 {
        position: absolute;
        top: 1rem;
        left: 10%;
        width: 80%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.4rem;
        color: white;
      }
      .p2 {
        position: absolute;
        top:2rem;
        left: 10%;
        width: 80%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.3rem;
        color: white;
      }
    }
  }
}
</style>